<template>
  <div class="star" :class="starType">
  	<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
  </div>
</template>
<script type="text/javascript">
    const LENGTH = 5;
    const CLS_ON = 'on';
    const CLS_OFF = 'off';
    const CLS_HALF = 'half';

	export default{
		props:{
			size:{
				type:Number
			},
			score:{
				type:Number
			}
		},
	    created () {
	        // console.log(this.size) // seller 为空对象
	    },
		computed:{
			starType(){
				return 'star-' + this.size;
			},
			itemClasses(){
				let result = [];
				let score= Math.floor(this.score*2)/2;
				let hasDecimal = score % 1 != 0;
				let integer = Math.floor(score);
				for (let i = 0; i < integer; i++) {
					result.push(CLS_ON);
				}
				if (hasDecimal) {
					result.push(CLS_HALF);
				}
				while (result.length < LENGTH){
					result.push(CLS_OFF);
				}
				return result;
			}
		}
	};
</script>
<style type="text/css">
	.star{font-size: 0;}
	.star .star-item:last-child{margin-right: 0;}
	.star-48{}
	.star-48 .star-item{width: 20px;height: 20px;margin-right: 22px;background-size: 100% 100%;}
	.star-48 .on{background: url(star48_on@2x.png);}
	.star-48 .off{background: url(star48_off@2x.png);}
	.star-48 .half{background: url(star48_half@2x.png);}
	.star-36{}
	.star-36 .star-item{width: 15px;height: 15px;margin-right: 6px;background-size: 100% 100%;}
	.star-36 .on{background: url(star36_on@2x.png);}
	.star-36 .off{background: url(star36_off@2x.png);}
	.star-36 .half{background: url(star36_half@2x.png);}
	.star-24{}
	.star-24 .star-item{width: 10px;height: 10px;}
	.star .star-item{display: inline-block;background-repeat: no-repeat;margin-right: 3px;background-size: 100% 100%;}
	.star-24 .on{background: url(star24_on@2x.png);}
	.star-24 .off{background: url(star24_off@2x.png);}
	.star-24 .half{background: url(star24_half@2x.png);}
</style>